


<style > 
.search-page{
font-size: 12px;
}
.addr-btn{
  width: 100px;
  height: 30px;
  background: #FFD94B;
  color: #000;
  border: 1px solid #000;
  margin: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
}
.nut-searchbar{
  padding: 10px 0 6px 0;
}
.search-line{
  padding: 5px 10px;
  align-items: center;
}
/* 列表样式相关 */

.col{
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.item{ margin: 10px 0; }
.bg-img{ height: 200px; background: url(https://unsplash.it/100/100?random) center center / 100% 100%; }
.bg-title-txt{ font-size: 18px; font-weight: 600; margin: 10px 0; }
.tags{ margin: 5px 0 ;} 
.tag{
  background: #FBD100;
  padding: 2px 10px;
  font-size: 12px;
  margin: 0 10px 5px 0;
  border-radius: 50px;
}  
.attrs{ margin: 5px 0 ;} 
.attr{ flex: 1; text-align: center; font-size: 12px;}
.attr1{
  color: #FFF100;
  text-align: left;
}
.attr2{
  color: #ccc;
} 
.list{ 
  margin-top: 10px;
  flex: 1;
  overflow: auto;
}
.search-item{
  margin: 0 10px;
}

</style>
<template>
   <view class="page search-page">
      <view class="flex search-line">
 <!-- <nut-button class="addr-btn" shape="round" type="primary" icon="locationg3" @click="showLeft=true">佛山</nut-button> -->
        <view class="addr-btn" @click="showLeft=true"> <nut-icon name="locationg3"></nut-icon> 佛山 </view> 
        <nut-searchbar v-model="searchValue"></nut-searchbar>
      </view> 
 
      <nut-picker v-model:visible="showLeft" :columns="cascaderColumns" title="城市选择" @confirm="confirm" ></nut-picker>

      <nut-menu v-if="type==1">
        <nut-menu-item v-model="value1" :options="options1" /> <nut-menu-item v-model="value2" :options="options2" /> <nut-menu-item v-model="value3" :options="options3" /> <nut-menu-item v-model="value4" :options="options4" />
      </nut-menu>
      <nut-menu v-if="type==2">
            <nut-menu-item v-model="value1" :options="options1" /> <nut-menu-item v-model="value2" :options="options2" /> <nut-menu-item v-model="value3" :options="options3" />
      </nut-menu>
 

  <view class="main search-content" @scroll="handleScroll" >
  
      <!-- <nut-list :height="50" :listData="list" @scroll="handleScroll" style="width:100vw">
        <template v-slot="{ item }">
          <view class="list-item">
              
          </view>
        </template>
      </nut-list>  -->

      <view class="item search-item "  v-for="(item,index) in list " :key="index"  @click="onChoose">
      <view class="bg-img"></view>
      <view class="bg-title-txt">测试</view>
      <view class="tags flex">
        <view class="tag">测试</view>
        <view class="tag">测试</view>
      </view>
      <view class="attrs flex">
        <view class="attr attr1">测试</view>
        <view class="attr attr2">测试</view>
        <view class="attr attr3">测试</view>
      </view>

    </view>
  </view> 


    </view>


</template>
<script>
export default {
  components: {},
  data() {
    return {
      showLeft:false,
      cascaderColumns:[ {
          text: '浙江',
          value: 'ZheJiang',
          children: [
            {
              text: '杭州',
              value: 'HangZhou',
              
            },
            {
              text: '温州',
              value: 'WenZhou',
             
            }
          ]
        },
        {
          text: '福建',
          value: 'FuJian',
          children: [
            {
              text: '福州',
              value: 'FuZhou',
               
            },
            {
              text: '厦门',
              value: 'XiaMen', 
            }
          ]
        }
      ],
      value1:0,value2:0, value3:0,value4:0, 
     options1: [ { text: '区域', value: 0 }, ],
    options2: [ 
      { text: '状态', value: 0 }, 
      { text: '再租', value: 1 }, 
      { text: '已租', value: 2 }, 
      { text: '在售', value: 3 }, 
      { text: '已售', value: 4 }, 
    ],
    options3: [  // 前端是0开始的 传后端需要转义一下 
      { text: '类型', value: 0 }, 
      { text: '高层', value: 1 }, 
      { text: '公寓', value: 2 }, 
      { text: '别墅', value: 3 }, 
      { text: '单家', value: 4 }, 
      { text: '写字楼', value: 5 }, 
      { text: '商铺', value: 6}, 
      { text: '土地', value: 7 }, 
    ],
    options4: [ 
      { text: '排序', value: 0 },
      { text: '倒序', value: 1 },
      { text: '升序', value: 2 },
   ],
    
      list:new Array(20).fill(0),
      type :1,
     
    };
  },
  mounted() {
    var params = this.params()
    console.log(params);
    this.type = params.type
  },
  methods: {
    async  loadList(){
      var th = this;
      th.ajax.get(th.ajax.api.propertys,).then(async (res) => {
         console.log("查询 propertys", res);  
      });
     },
    handleScroll(e){   
      console.log(e);
      let arr = new Array(20).fill(0);
      //this.list = this.list.concat(arr)   
    },
    confirm ({ selectedValue, selectedOptions }) {
      console.log({ selectedValue, selectedOptions });
    },
  },
};
</script>  